<template>
	<div class="monitorAll">
		<a-card hoverable style="width: 400px;height:370px;float:left;margin:0.3%;margin-bottom:0.5%;margin-top:0.2%">
    			<img style="width:400px;height:300px;" :src="this.pathList[0].path"/>
    			<a-card-meta v-bind:title="this.pathList[0].num"></a-card-meta>
  		</a-card>
		<a-pagination v-model="current" :total="this.total" show-less-items :pageSize="this.pageSize" showQuickJumper style="float:right;margin-right:1%" @change="onChange"/>
	</div>
</template>

<script>

export default {
	data(){
		return{
			current: 1,
			total:0,
			pageSize:6,
			pathList:[],
			pathData:[
				{	num:'501',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'502',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'503',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'504',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'505',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'506',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},

				{	num:'507',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'508',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'509',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'510',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'511',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'512',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},

				{	num:'513',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'514',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'515',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'516',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'517',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
				{	num:'518',
					path:'http://192.168.31.47:8090/stream.mjpg'
				},
			]
		}
	},
	created(){
		this.total = this.pathData.length
		for(let i = 0;i<6;i++)
		{
			this.pathList[i] = this.pathData[this.pageSize*(this.current-1)+i]
		}	
		
	},
	mounted(){
	},
	destroyed(){
		
	},
	methods:{
		onChange(){
			for(let i = 0;i<6;i++)
			{
				this.pathList[i] = this.pathData[this.pageSize*(this.current-1)+i]
			}	
		}
	}
};
</script>

<style lang="scss" scoped>
.monitorAll{
	width:99%;
	height:95%;
	margin-left:1%;
	margin-top:1%;
	overflow-y: scroll;
}
// img{
// 	width:16%;
// 	height:30%;
// 	margin:0.3%;
// 	margin-bottom: 3%;
// }
</style>